<template>
    <div id="home">
        <nav-bar class="home-nav">
            <div slot="center">购物街</div>
        </nav-bar>
        <home-swiper :banners="banners"></home-swiper>
        <recommend-view :recommends="recommends"></recommend-view>
        <feature-view></feature-view>
        <tab-control class="tab-control" :titles="['流行','新款','精选']" @tabClick="tabClick"/>
        <goods-list :goods="showGoods"></goods-list>
    </div>
</template>

<script>
    import HomeSwiper from "./childComps/HomeSwiper";
    import RecommendView from "./childComps/RecommendView";
    import FeatureView from "./childComps/FeatureView";

    import NavBar from "components/common/nvabar/NavBar";
    import TabControl from "components/content/tabControl/TabControl";
    import GoodsList from "components/content/goods/GoodsList";

    import {
        getHomeMultidata,
        getHomeGoods
    } from "network/home";


    export default {
        name: "Home",
        components:{
            HomeSwiper,RecommendView,FeatureView,
            NavBar,TabControl,GoodsList
        },
        data(){
          return{
              banners:[],
              recommends:[],
              goods:{
                  pop:{page:0,list:[]},
                  new:{page:0,list:[]},
                  sell:{page:0,list:[]},
              },
              currentType:'pop'
          }
        },
        computed:{
          showGoods(){
              return this.goods[this.currentType].list
          }
        },
        created(){
            //请求多个数据
            this.getHomeMultidata();

            // 请求商品数据
            this.getHomeGoods('pop');
            this.getHomeGoods('new');
            this.getHomeGoods('sell');
        },
        methods:{
            /**
             * 事件监听相关的方法
             */
            tabClick(index){
                console.log(index)
                switch (index) {
                    case 0:
                        this.currentType = 'pop'
                        break;
                    case 1:
                        this.currentType = 'new'
                        break
                    case 2:
                        this.currentType = 'sell'
                        break
                }
            },



            /**
             * 网络请求相关的方法
             */
            getHomeMultidata(){
                //请求多个数据
                getHomeMultidata().then(res=>{
                    this.banners = res.data.banner.list
                    this.recommends = res.data.recommend.list
                })

            },
            getHomeGoods(type){
                const page = this.goods[type].page+1
                // 请求商品数据
                getHomeGoods(type,page).then(res=>{
                    console.log(res)
                     this.goods[type].list.push(...res.data.list)
                    this.goods[type].page += 1
                })
            }
        }
    }
</script>

<style scoped>
    #home{
        padding-top: 44px;
    }
    .home-nav{
        background-color: var(--color-tint);
        color: #ffffff;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9;
    }
    .tab-control{
        position: sticky;
        top: 44px;
        z-index: 9;
    }
</style>